<template>
	<view class="v1">
		<view class="top">
			<view><text>会员名称：小小少年</text></view>
			<view><text>会员手机：18854132699</text></view>
		</view>
		<view class="course">
			<view class="box2">
				<view class="card">
					<image :src="data.courseUrl"></image>
				</view>
				<view class="content">
					<view>{{data.courseName}}</view>
					<view>￥{{data.orderPrice}}.00</view>
				</view>
			</view>
		</view>
		<view class="msg" style="margin:0;margin-top: 84rpx;">
			<view class="msg1">
				<view><text>优惠券</text></view>
				<view><text>积分抵扣</text></view>
			</view>
			<view class="msg2">
				<view @click="toggle('bottom')"><text>{{data.ticket}}</text><img class="arrow"
						src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AE%A2%E5%8D%95%E7%BB%93%E7%AE%97/u2969.png"
						alt=""></view>
				<view @click="toggle1('bottom')"><text>{{data.integration}}</text><img class="arrow"
						src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AE%A2%E5%8D%95%E7%BB%93%E7%AE%97/u2969.png"
						alt=""></view>
			</view>
		</view>
		<view class="line">
			<image
				src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u4562.png"
				mode=""></image>
		</view>
		<view class="msg" style="margin:0;">
			<view class="msg1">
				<view><text>总计</text></view>
				<view><text>优惠券</text></view>
				<view><text>积分</text></view>
				<view><text>实付</text></view>
			</view>
			<view class="msg2">
				<view><text>{{data.orderPrice}}</text></view>
				<view><text>{{data.ticket}}</text></view>
				<view><text>{{data.integration}}</text></view>
				<view><text style="color: #999999;">￥</text><text>{{data.lastPay}}.00</text></view>
			</view>
		</view>
	</view>
	<view class="integral"><text>本单可获得{{data.integration}}积分</text></view>
	<view class="under">
		<view>
			<text>￥{{data.lastPay}}.00</text>
		</view>
		<view>
			<navigator url="/pages/paySuccess/paySuccess">
				<text>立即支付</text>
			</navigator>
		</view>
	</view>
	<view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="discount-open">
				<view class="do-top">
					<view>可用优惠券</view>
					<view @click="close"><img style="width: 32rpx;height: 32rpx;"
							src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AE%A2%E5%8D%95%E7%BB%93%E7%AE%97/u3008.png"
							alt=""></view>
				</view>
				<view class="do-middle">
					<view class="discount-show">
						<view class="ds-left">
							￥50
						</view>
						<view class="ds-right">
							<view><text style="font-size: 28rpx;color: #93989d;font-weight: bold;">购买课程无门槛优惠券</text>
							</view>
							<view><text style="color: #d1d3d4;font-size: 24rpx;">推荐好友购买获得</text></view>
							<view><text style="color: #d1d3d4;font-size: 24rpx;">有效期至：2019-08-01</text></view>
						</view>
						<view class="ds-circle">
							<img style="width: 40rpx;height: 40rpx;"
								src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AE%A2%E5%8D%95%E7%BB%93%E7%AE%97/2_u3033.png"
								alt="">
						</view>
					</view>
				</view>
				<view class="do-bottom">
					<view class="db-left">
						<text>不使用优惠券</text>
					</view>
					<view class="db-right">
						<img style="width: 40rpx;height: 40rpx;"
							src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AE%A2%E5%8D%95%E7%BB%93%E7%AE%97/1_u3032.png"
							alt="">
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 积分弹框 -->
		<uni-popup ref="points" background-color="#fff">
			<view class="points-open">
				<view class="do-top">
					<view>可用优惠券</view>
					<view @click="close1"><img style="width: 32rpx;height: 32rpx;"
							src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AE%A2%E5%8D%95%E7%BB%93%E7%AE%97/u3008.png"
							alt=""></view>
				</view>
				<view class="do-bottom">
					<view class="db-left">
						使用积分抵扣100元
					</view>
					<view class="ds-circle">
						<img style="width: 40rpx;height: 40rpx;"
							src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AE%A2%E5%8D%95%E7%BB%93%E7%AE%97/2_u3033.png"
							alt="">
					</view>
				</view>
				<view class="do-bottom">
					<view class="db-left">
						<text>不使用积分</text>
					</view>
					<view class="db-right">
						<img style="width: 40rpx;height: 40rpx;"
							src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AE%A2%E5%8D%95%E7%BB%93%E7%AE%97/1_u3032.png"
							alt="">
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app"
import {ref} from 'vue'
import http from "@/utils/http.js";
let order=ref();
let data=ref();
onLoad((option)=>{
  order.value=option.order
  console.log(option.order);
  http({
	  url:'/order/queryAllInfo',
	  params:{orderNum:order.value}
  }).then((res)=>{
	  data.value=res.data
  })
 })
</script>

<style lang="less" scoped>
	.v1 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;

		.top {
			box-shadow: 0px 2px 10px rgb(242 242 242);
			font-family: '思源黑体';
			font-weight: 400;
			width: 674rpx;
			height: 156rpx;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 8px;
			display:flex;
			flex-direction: column;
			margin-top: 60rpx;
			justify-content: center;
			view:nth-child(1){
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				margin-left: 24rpx;
				margin-bottom: 26rpx;
			}
			view:nth-child(2){
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				margin-left: 24rpx;
			}
		}
		.course{
			box-shadow: 0px 2px 10px rgb(242 242 242);
			font-family: '思源黑体';
			font-weight: 400;
			width: 674rpx;
			height: 200rpx;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 8px;
		}
	}
	.box2 {
		display: flex;
	
		.content {
			margin-left: 24rpx;
			margin-top: 60rpx;
	
			view:nth-child(1) {
				font-size: 26rpx;
				font-weight: 700;
				color: #333333;
				margin-bottom: 20rpx;
			}
		}
	
		.content view:nth-child(2) {
			font-size: 24rpx;
			font-weight: 700;
			color:#ff0000;
		}
	}
	
	.card {
		border-radius: 8rpx;
		margin-left: 24rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		image {
			width: 174rpx;
			height: 128rpx;
		}
	}
	.msg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 24rpx 28rpx 34rpx;
		width: 674rpx;
		.msg1 text {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
		}
	
		.msg1 view {
			margin-bottom: 16rpx;
		}
	
		.msg2 {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
	
			view {
				margin-bottom: 16rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
			
			view:nth-child(4) text {
				font-size: 32rpx;
				font-weight: 700;
				color: #333333;
			}
		}
	}
	.line {
		text-align: center;
		color: #333333;
		font-weight: 400;
	
		image {
			height: 4rpx;
			width: 608rpx;
		}
	}
	.integral{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 40rpx;
		text{
			font-size: 24rpx;
			color: #1E1E1E;
			font-weight: 400;
		}
	}
	.under {
		width: 750rpx;
		height: 120rpx;
		background-color: #ffffff;
		border-top: 1px solid rgba(225, 225, 225, 1);
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		view:nth-child(1) {
			width: 375rpx;
			height: 120rpx;
			_border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			text{
				font-size: 48rpx;
				font-weight: 700;
				color: #ff0000;
			}
		}
	
		view:nth-child(2) {
			width: 375rpx;
			height: 120rpx;
			_border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(47, 120, 255, 1);
			text{
				font-size: 32rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
	.discount-open {
		width: 750rpx;
		height: 616rpx;
		// padding: 36rpx 42rpx;
	
		.do-top {
			height: 94rpx;
			border-bottom: 1px solid #fafafa;
			padding: 0 42rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 27rpx;
		}
	
		.do-middle {
			height: 300rpx;
			display: flex;
			justify-content: center;
			align-items: center;
	
			.discount-show {
				width: 656rpx;
				height: 192rpx;
				box-shadow: 2px 2px 20px 1px #f3f8ff;
				border: 1px solid #f1f3f6;
				border-radius: 10rpx;
				display: flex;
	
				.ds-left {
					width: 188rpx;
					height: 192rpx;
					background: linear-gradient(45deg, #6695FF 25%, #6639FF 75%);
					color: white;
					font-size: 70rpx;
					font-weight: bold;
					display: flex;
					justify-content: center;
					align-items: center;
				}
	
				.ds-right {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					padding-left: 20rpx;
				}
	
				.ds-circle {
					line-height: 192rpx;
					padding-left: 94rpx;
				}
			}
		}
	
		.do-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 50rpx;
			font-size: 29rpx;
		}
	}
	
	// 积分的弹框
	.points-open {
		height: 516rpx;
	
		.do-top {
			height: 94rpx;
			border-bottom: 1px solid #fafafa;
			padding: 0 42rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 27rpx;
		}
	
		.do-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 35rpx 50rpx;
			font-size: 29rpx;
		}
	}
	.arrow {
		width: 14rpx;
		height: 24rpx;
		margin-left: 4rpx
	}
</style>
